<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://myjslib.qiniudn.com/fonts/roboto/roboto.css">
    <link rel="stylesheet" href="./waterfall/demo/demo.css">
    <title>Demo</title>
</head>
<body>
    <header class="header">
        <div class="content">
            <h1>Responsive Waterfall</h1>
            <p>Resize the browser to see the responsive the effect</p>
            <div class="btn-group">
                <button id='add-btn' class="btn btn-primary">Add Box</button>
                <button id='scaleup-btn' class="btn btn-primary">Scale Up</button>
                <button id='scaledown-btn' class="btn btn-primary">Scale Down</button>
            </div>
            <a href="https://github.com/leozdgao/responsive_waterfall">View on Github</a>
        </div>
    </header>
    <section>
        <div class="wf-container">
            <!-- <div class="wf-box">
                <img src="http://placehold.it/300x600/E97452/fff">
                <div class="content">
                    <h3>Title</h3>
                    <p>Content Here</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="c:\Users\AAAAALEX\Desktop\myCrawler\dist\994514.jpg">
                <div class="content">
                    <h3>Title</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x250/449F93/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/200x320/936FBC/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/400x500/D25064/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x200/CF364A/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x400/E59649/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/350x500/75A0CC/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdf ljaljaljal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x200/4296AD/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x400/9FDBC7/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div>
            <div class="wf-box">
                <img src="http://placehold.it/300x300/4E8EF7/fff">
                <div class="content">
                    <h3>Heading</h3>
                    <p>Content aa asdfasdfjal</p>    
                </div>
            </div> -->
        </div>
    </section>
    <script src="./waterfall/demo/app.js"></script>
    <script src="./waterfall/responsive_waterfall.js"></script>
</body>
</html>